import React, { useContext,useState } from 'react'
import { Form,Input,Button,Toast  } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'
import { Mycontext } from '../../App'
import { actions } from '../../store'

export default function Login(props) {
  const {state,dispatch} = useContext(Mycontext)
  const [user, setuser] = useState({
    phone:"",
    password:"",
  })

  const login=()=>{
    reqlogin(user).then((res)=>{
      if(res.data.code === 200){
        Toast.show({
          content:res.data.msg,
      })
      }
      /* 存数据 */
      dispatch(actions.cahngeuserInfo(res.data.list))
      /* 跳页面 */
      props.history.push("/index/home")
    })
  }

  return (
    <div className='login'>
    <Header text="登录" back></Header>
    <Form layout='horizontal'>
      <Form.Item label='手机号' name='phone'>
        <Input placeholder='请输入手机号' clearable 
        onChange={e=>setuser({...user,phone:e})}/>
      </Form.Item>
      <Form.Item label='密码' name='password'>
        <Input placeholder='请输入密码' clearable type='password'
        onChange={e=>setuser({...user,password:e})} />
      </Form.Item>
      <Button block color='primary' size='large' onClick={()=>login()}>
      登录
    </Button>
    </Form>
  </div>
  )
}


